<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <input type="text" class="myinput" />
    <script>
      // 防抖： debounce ： 在一段时间内执行一次，如果在时间间隔内执行 ，那么会重新计时；
      // 节流 ： trottle ： 在一段间隔时间内不停的执行；（控制频率的）;
      var myinputEle = document.querySelector(".myinput");

      // 非通用版本节流
      // var startTime = new Date().getTime();
      // myinputEle.oninput = function(){
      //     // console.log(this.value);
      //     var endTime = new Date().getTime();
      //     if((endTime-startTime)>500){  // 如果时间差 大于间隔时间 那么就执行 ，否则就不执行函数；
      //         console.log(this.value);
      //         startTime = new Date().getTime();
      //     }
      // }

      myinputEle.oninput = trottle(function () {
        console.log(this.value);
      }, 500);

      // 节流函数
      function trottle(fn, delay) {
        var startTime = new Date().getTime();
        return function () {
          var endTime = new Date().getTime();
          if (endTime - startTime > delay) {
            // 如果时间差 大于间隔时间 那么就执行 ，否则就不执行函数；
            fn.apply(this);
            // fn();
            startTime = new Date().getTime();
          }
        };
      }

      document.onmousemove = trottle(function () {
        console.log("move");
      }, 500);

      window.onresize = trottle(function () {
        console.log("resize");
      }, 500);

      // 防抖：类似 游戏技能 ，释放前的摇；
      // 节流： 类似 技能的cd；
    </script>
  </body>
</html>
